<template>
  <h1>{{msg}}</h1>
  <h1>{{title}}</h1>
  <input type="text" v-model="username" @blur="handleUpdate($event);">
</template>

<script setup lang="ts">
import {ref} from "vue";
// defineProps({
//   msg: String
// })

// defineProps<{
//   msg?: (string | number),
//   test?: string;
// }>();

// interface Props{
//   msg?: (string | number | boolean),
//   title: string[];
// }
//
// withDefaults(defineProps<Props>(), {
//   msg: "hello",
//   title: () => ['one', 'two']
// });

withDefaults(defineProps<{
  msg?: (string | number | boolean),
  title?: string;
}>(),{
  msg: "hello vite",
  title: "默认标题"
})



const emit = defineEmits<{
  (event:'on-update',data:object):void,
  (event: 'on-delete', data: string): void;
}>()

const username = ref<string>('');
// const emit = defineEmits(['on-update']);



const handleUpdate = (event: any) => {
  const {target} = event;
  emit('on-update', {data:event.target.value});
  emit('on-delete', event.target.value);

};


</script>

